<template>
    <NCard class="w-2/3" :style="{ fontSize: `${store.state.fontSize}em` }">
        <NRow>
            <h1 class="m-auto p-0">设置</h1>
        </NRow>
        <NRow>
            <NForm class="w-full">
                <NFormItem :label="'字体大小'" path="font">
                    <NSlider
                        v-model:value="setting.fontSize"
                        :min="0.2"
                        :max="2"
                        :step="0.1"
                        @update-value="changeFontSize"
                    ></NSlider>
                </NFormItem>
                <NFormItem :label="'Api-Key'" path="apiKey">
                    <NInput
                        :value="store.state.apiKey"
                        @update-value="(v:string)=>{store.commit('update',{apiKey:v})}"
                    ></NInput>
                </NFormItem>
                <NFormItem :label="'数据库'" path="database">
                    <NCheckboxGroup
                        :value="store.state.database"
                        @update-value="
                            (v) => {
                                store.commit('update', { database: v });
                            }
                        "
                    >
                        <NCheckbox
                            v-for="item in setting.database"
                            :value="item.key"
                            :label="item.label"
                        ></NCheckbox>
                    </NCheckboxGroup>
                </NFormItem>
            </NForm>
        </NRow>
    </NCard>
</template>
<script lang="ts" setup>
import {
    NRow,
    NCard,
    NForm,
    NFormItem,
    NSlider,
    NCheckbox,
    NCheckboxGroup,
    NInput,
} from "naive-ui";
import { reactive } from "vue";
import { useStore } from "vuex";
const store = useStore();
let setting = reactive({
    fontSize: store.state.fontSize,
    checkedDatabase: store.state.database,
    database: [
        {
            label: "bing",
            key: "bing",
        },
        {
            label: "arxiv",
            key: "arxiv",
        },
    ],
});
function changeFontSize(v: number) {
    setting.fontSize = v;
    store.commit("update", {
        fontSize: v,
    });
}
</script>
